<template>
	<view class="box">
		<view class="head">
			<!-- 状态栏高度 -->
			<view :style="{ height: `${statusBarHeight}px` }"></view>
			<!-- 自定义导航栏高度 并 居中 -->
			<view :style="{
					          height: `${barHeight}px`,
					          'line-height': `${barHeight}px`,
					          'text-align': 'center',
					        }">
				<h5>我的</h5>
			</view>
			<view class="user" @tap="goPerson">
				<view class="left">
					<u-avatar style=" margin-right: 22rpx;" size="130" :src="userInfo.avatar"></u-avatar>
					<text>{{userInfo.nickname}}</text>
				</view>
				<view class="right">
					<image style="width: 48rpx;
					height: 48rpx;" src="../../static/image/you.png" mode=""></image>
				</view>
			</view>

		</view>
		<view class="my">
			<view class="class" @tap="goClass(1)">
				<text>我的课程</text>
			</view>
			<view class="fabu" @tap="goClass(0)">
				<text>我的发布</text>
			</view>
		</view>
		<view class="list">
			<view class="list-item" v-for="(item,index) in list" :key="index" @tap="go(index)">
				<view style="display: flex; align-items: center;">
					<image style="width: 54rpx;height: 54rpx; margin-right: 28rpx;" :src="item.icon" mode=""></image>
					<text>{{item.name}}</text>
				</view>
				<image style="width: 10rpx; height: 18rpx;" src="../../static/image/rightRow.png" mode=""></image>
			</view>
		</view>
		<!-- <tabbarLevel current="4"></tabbarLevel> -->
	</view>
</template>

<script>
	// import tabbarLevel from '@/components/tabbar/tabbar.vue'
	export default {
		components: {
			// tabbarLevel
		},
		data() {
			return {
				statusBarHeight: '',
				barHeight: '',
				userInfo: {},
				list: [
					// {
					// 	name: '我的钱包',
					// 	icon: '/static/image/qianbao.png'
					// },
					{
						name: '我的收藏',
						icon: '/static/image/shoucang.png'
					},
					{
						name: '联系客服',
						icon: '/static/image/kefu.png'
					},
					{
						name: '关于我们',
						icon: '/static/image/guanyu.png'
					},
					{
						name: '反馈意见',
						icon: '/static/image/fankui.png'
					},
					{
						name: '退出账号',
						icon: '/static/image/tuichu.png'
					},
				]
			}
		},
		onLoad() {

			// 状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 胶囊数据
			const {
				top,
				height
			} = wx.getMenuButtonBoundingClientRect();
			// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
			this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			goClass(index) {
				console.log(index);
				// uni.switchTab({
				// 	url: `/pages/invent/invent?current=${index}`
				// })
				uni.reLaunch({
					url: `/pages/invent/invent?current=${index}`
				})
			},
			go(index) {
				let that = this
				console.log(index);
				if (index == 0) {
					// uni.navigateTo({
					// 	url: '/pages/my/money'
					// })
					uni.navigateTo({
						url: '/pages/my/collect'
					})
				} else if (index == 1) {
					// uni.navigateTo({
					// 	url: '/pages/my/collect'
					// })
					uni.navigateTo({
						url: '/pages/my/kefu'
					})
				} else if (index == 2) {
					// uni.navigateTo({
					// 	url: '/pages/my/kefu'
					// })
					uni.navigateTo({
						url: '/pages/my/about'
					})
				} else if (index == 3) {
					// uni.navigateTo({
					// 	url: '/pages/my/about'
					// })
					uni.navigateTo({
						url: '/pages/my/feedback/index'
					})
				} else if (index == 4) {
					// uni.navigateTo({
					// 	url: '/pages/my/feedback/index'
					// })
					uni.showModal({
						title: '提示',
						content: '确定要退出吗？',
						success: function(res) {
							if (res.confirm) {
								that.$u.vuex('vuex_token', '');
								that.$u.vuex('vuex_hasLogin', false);
								that.$u.vuex('vuex_user', '');
								uni.removeStorageSync('lifeData')
								uni.removeStorageSync('Headtoken')
								uni.removeStorageSync('citys')
								that.$u.toast('退出成功')
								setTimeout(function() {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								}, 200);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else if (index == 5) {
					uni.showModal({
						title: '提示',
						content: '确定要退出吗？',
						success: function(res) {
							if (res.confirm) {
								that.$u.vuex('vuex_token', '');
								that.$u.vuex('vuex_hasLogin', false);
								that.$u.vuex('vuex_user', '');
								uni.removeStorageSync('lifeData')
								uni.removeStorageSync('Headtoken')
								uni.removeStorageSync('citys')
								that.$u.toast('退出成功')
								setTimeout(function() {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								}, 200);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			getInfo() {
				this.$u.api.myInfo().then(data => {
					this.userInfo = data
					this.$u.vuex('vuex_user', data)
				})
			},
			goPerson() {
				uni.navigateTo({
					url: '/pages/my/personal'
				})
			},

			getPic() {
				this.$u.api.AboutPic().then(data => {
					this.indroPic = data
				})
			},
			look(url) {
				let arr = []
				arr.push(url)
				uni.previewImage({
					urls: arr,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {

						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			previeImg() {
				let arr = []
				arr.push(this.infoList.avatar)
				uni.previewImage({
					urls: arr,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 完善个人信息
			goFill() {
				uni.navigateTo({
					url: '/pagesShop/myInfo/information'
				})
			},

			goLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			gotourl(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2 !important;
	}

	.box {
		width: 100%;
		overflow-x: hidden;
		.head {
			padding: 0 30rpx;
			// position: fixed;
			// width: 100%;
			// z-index: 99999;
			height: 430rpx;
			background-image: url('https://xiyanluo.oss-cn-beijing.aliyuncs.com/%E8%8D%94%E8%87%B4%E5%AE%B6%E6%95%99/wode.png');
			background-repeat: no-repeat;
			background-size: cover;
			position: relative;

			h5 {
				font-size: 34rpx;
				color: #FFFFFF;
			}

			.user {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 40rpx 0 45rpx;
				width: 690rpx;
				position: absolute;
				bottom: -10rpx;
				height: 222rpx;
				background: #FFFFFF;
				border-radius: 30rpx;

				.left {
					display: flex;
					align-items: center;

					text {
						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}
				}
			}
		}

		.my {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			padding: 0 11rpx;

			text {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.class {
				padding: 70rpx 0 0 177rpx;
				width: 364rpx;
				height: 180rpx;
				background-repeat: no-repeat;
				background-size: contain;
				background-image: url('https://xiyanluo.oss-cn-beijing.aliyuncs.com/%E8%8D%94%E8%87%B4%E5%AE%B6%E6%95%99/keceng.png');
			}

			.fabu {
				padding: 70rpx 0 0 177rpx;
				width: 364rpx;
				height: 180rpx;
				background-repeat: no-repeat;
				background-size: contain;
				background-image: url('https://xiyanluo.oss-cn-beijing.aliyuncs.com/%E8%8D%94%E8%87%B4%E5%AE%B6%E6%95%99/fabu.png');

			}
		}

		.list {
			margin: 0 30rpx;
			height: 684rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.list-item {
				padding: 0 50rpx 0 34rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 114rpx;
				position: relative;

				&::after {
					content: '';
					display: block;
					width: 537rpx;
					height: 1px;
					background: #EEEEEE;
					position: absolute;
					bottom: 0;
					left: 117rpx;
				}

				&:last-child::after {
					height: 0rpx;
				}
			}
		}
	}
</style>